<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Layui</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <link rel="stylesheet" href="css/layui.css"  media="all">
    <!-- 注意：如果你直接复制所有代码到本地，上述css路径需要改成你本地的 -->
    <script type="text/javascript">
        var request = {
            QueryString : function(val) {
                var uri = window.location.search;
                var re = new RegExp("" +val+ "\=([^\&\?]*)", "ig");
                return ((uri.match(re))?(uri.match(re)[0].substr(val.length+1)):null);
            }
        }
        vvv=request.QueryString("key");
        //设置cookie的名称、值、失效时间
        document.cookie = "drrkey=" + vvv ;


    </script>

</head>

<body>
<div class="demoTable">
    姓名方式检索 , 分隔多个：

    <div class="layui-inline">
        <input class="layui-input" name="id" id="demoReload" autocomplete="off">
    </div>
    房间id：和前面那个二选一
    <div class="layui-inline">
        <input class="layui-input" name="roomid" id="roomid" autocomplete="off">
    </div>
    组织要求的神秘暗号：
    <div class="layui-inline">
        <input class="layui-input" name="key" id="key" autocomplete="off">
    </div>
    <button class="layui-btn" data-type="reload">搜索</button>
</div>
<table class="layui-hide" id="test"></table>


<script src="layui.js" charset="utf-8"></script>
<!-- 注意：如果你直接复制所有代码到本地，上述js路径需要改成你本地的 -->

<script>

    Date.prototype.Format = function (fmt) { //author: meizz

        var o = {
            "M+": this.getMonth() + 1, //月份

            "d+": this.getDate(), //日

            "h+": this.getHours(), //小时

            "m+": this.getMinutes(), //分

            "s+": this.getSeconds(), //秒

            "q+": Math.floor((this.getMonth() + 3) / 3), //季度

            "S": this.getMilliseconds() //毫秒

        };

        if (/(y+)/.test(fmt))

            fmt = fmt.replace(RegExp.$1, (this.getFullYear() + "").substr(4 - RegExp.$1.length));

        for (var k in o)

            if (new RegExp("(" + k + ")").test(fmt))

                fmt = fmt.replace(RegExp.$1, (RegExp.$1.length == 1) ? (o[k]) : (("00" + o[k]).substr(("" + o[k]).length)));

        return fmt;

    }

    makeform=layui.use('table', function(){
        var table = layui.table;
        var date = new Date();
        table.render({
            elem: '#test'
            ,url:'https://49.232.169.247:8080/drrr/getByPage'
            ,request:{
                pageName: 'page' //页码的参数名称，默认：page
                ,limitName: 'size' //每页数据量的参数名，默认：limit
            }
            ,cellMinWidth: 80 //全局定义常规单元格的最小宽度，layui 2.2.1 新增
            ,page: true //开启分页
            ,cols: [[
                {field:'id', width:80, title: 'ID', sort: true}
                ,{field:'name', width:100, title: '用户名'}
                ,{field:'tripcode', width:150, title: 'tripcode'}
                ,{field:'roomid', width:120, title: 'roomid'}
                ,{field:'messagetime', title: '实际时间',sort: true,templet: function (d) {
                        date.setTime(d.messagetime);
                        return date.Format("yyyy-MM-dd hh:mm:ss");

                    },  width:200} //minWidth：局部定义当前单元格的最小宽度，layui 2.2.1 新增
                ,{field:'url', title: '网址', width: '10%', minWidth: 100}
                ,{field:'messagetype', title: '信息类型', width:200,sort: true}
                ,{field:'message', title: '信息内容', width: '50%', minWidth: 100}
            ]],
            id: 'cc',
        });
        var $ = layui.$, active = {
            reload: function(){
                var demoReload = $('#demoReload');
                var roomid = $('#roomid');
                var key = $('#key');

                //执行重载
                table.reload('cc', {
                    page: {
                        curr: 1 //重新从第 1 页开始
                    }
                    ,where: {
                            roomid:roomid.val(),
                            names: demoReload.val(),
                            key:key.val()

                    }
                }, 'data');
            }
        };

        $('.demoTable .layui-btn').on('click', function(){
            var type = $(this).data('type');
            active[type] ? active[type].call(this) : '';
        });
    });
</script>


</body>
</html>